import BaseComponent from "../../app/baseComponent";
import { startOfMonth, lastDayOfMonth, getDaysInMonth, addMonths, subMonths } from 'date-fns'

export class AuiDate extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            onRenderDates: {
                required: true
            },
            weekDays: {
                type: Array,
                default: function () {
                    return ["日", "一", "二", "三", "四", "五", "六"]
                }
            },
            value: {
                type: Date,
                default: new Date()
            }
        };
        this.methods = {
            render(date) {
                var self = this;

                if (date) {
                    self.now = date;
                }

                self.private_monthstr = self.createMonthstr();
                self.private_yearstr = self.createYearstr();
                self.private_daylength = getDaysInMonth(self.now);
                self.private_prevMonth = subMonths(self.now, 1);
                self.private_afterMonth = addMonths(self.now, 1);
                self.private_prevMonthDays = getDaysInMonth(self.private_prevMonth);
                self.private_firstDateOfMonth = startOfMonth(self.now);
                self.private_lastDateOfMonth = lastDayOfMonth(self.now);    
                
                var firstDateOfWeek = self.private_firstDateOfMonth.getDay();
                var lastDateOfWeek = self.private_lastDateOfMonth.getDay();
                var lastMonthDateLength = 7 - lastDateOfWeek;
        
                var dates = [];
                
                var origin = {
                    currentMonthDayLength: self.private_daylength,
                    prevMonthDayLength: self.private_prevMonthDays
                };

                for (var m = firstDateOfWeek; m > 0; m--) {
                    dates.push({
                        text: self.private_prevMonthDays - m + 1,
                        className: `${name}__day`,
                        range: "prev",
                        year: self.private_prevMonth.getFullYear(),
                        month: self.private_prevMonth.getMonth(),
                        day: self.private_prevMonthDays - m + 1,
                        origin: origin
                    });
                }
                for (var i = 1; i < self.private_daylength + 1; i++) {
                    dates.push({
                        text: i,
                        className: `${name}__day`,
                        range: "current",
                        year: self.now.getFullYear(),
                        month: self.now.getMonth(),
                        day: i,
                        origin: origin
                    });
                }
                for (var i = 1; i < lastMonthDateLength; i++) {
                    dates.push({
                        text: i,
                        className: `${name}__day`,
                        range: "next",
                        year: self.private_afterMonth.getFullYear(),
                        month: self.private_afterMonth.getMonth(),
                        day: i,
                        origin: origin
                    });
                }

                if (self.onRenderDates) {
                    dates = self.onRenderDates(dates, self.now);
                }

                self.private_weekdayElems = self.private_weekdays.map(function (v) {
                    v.className = name + "__week";
                    return v;
                });

                self.private_dates = dates;
            },
            refresh() {
                var self = this;
                self.render(self.now);
            },
            prev() {
                var self = this;
                self.now = subMonths(self.now, 1);
                self.render();
            },
            next() {
                var self = this;
                self.now = addMonths(self.now, 1);
                self.render();
            },
            onDayClick(e) {
                var self = this;
                self.$emit("dateselect", e);
            },
            createYearstr() {
                var self = this;
                return `${self.now.getFullYear()}年`;
            },
            private_onActionYearClick(e) {
                this.$emit("actionyearClick", e);
            },
            createMonthstr() {
                var self = this;                         
                return `${self.now.getMonth() + 1}月`;
            },
            private_onActionMonthClick(e) {
                this.$emit("actionmonthClick", e);
            },           
        };    
    }
    _template() {
        var self = this;
return `
<div class="${self._name}">
    <div class="${self._name}__actions"><button 
    class="${self._name}__action" type="button" @click="prev"><span class="${self._name}__iconprev"></span></button><div 
    class="${self._name}__action ${self._name}__range"><div 
    class="${self._name}__year" @click="private_onActionYearClick" ref="action_year">{{private_yearstr}}</div><div 
    class="${self._name}__month" @click="private_onActionMonthClick" ref="action_month">{{private_monthstr}}</div></div><button 
    class="${self._name}__action" type="button" @click="next"><span class="${self._name}__iconnext"></span></button></div>    
    <div class="${self._name}__weeks">
        <div :class="weekday.className" v-for="weekday in private_weekdays">{{weekday.text}}</div>
    </div>
    <div class="${self._name}__days">
        <div :class="date.className" 
        :data-year="date.year"
        :data-month="date.month"
        :data-day="date.day"
        @click="onDayClick"
        v-for="date in private_dates">{{date.text}}</div>
    </div>        
</div>
`        
    }
    _mounted() {                
        var self = this;    
        self.now = self.value;
        self.private_weekdays = self.weekDays.map(function (v) {
            return {
                className: "",
                text: v,
                origin: {}
            }
        }); 
        self.render();    
    }    
    _data() {
        var ret = {};            
        ret.private_yearstr = "";
        ret.private_monthstr = "";
        ret.private_daylength = 0;
        ret.private_prevMonth = 0;
        ret.private_prevMonthDays = 0;
        ret.private_firstDateOfMonth = {};
        ret.private_lastDateOfMonth = {};
        ret.private_weekdays = [];       
        ret.private_dates = [];
        ret.private_weekdayElems = [];
        return ret;        
    }      
}

AuiDate.install = function() {
    AuiDate.elementName = "aui-date";
    window.AUICustomComponents.define(AuiDate.elementName, AuiDate);    
}